import React, { memo, useEffect, useState } from 'react'
import Scroll from '../../baseUI/scroll'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import Classify from '../../components/main/Classify/Classify'
import RotationChart from '../../components/main/RotationChart/RotationChart'
import MenuBar from '../../components/main/MenuBar/MenuBar'
import ImgList from '../../components/main/ImgList/ImgList'
import SearchInput from '../../components/SearchInput/SearchInput'
import MainPopup from '../../components/MainPopup/MainPopup'
import HomeService from '@/components/main/homeService/HomeService'
import FrameLayout from '@/components/main/frameLayout/FrameLayout'
import ListData from '@/components/main/listData/ListData'
import MainBottomChooseCopy from "@/components/main/MainBottomChooseCopy/MainBottomChooseCopy"
import './Main.css'
import { useHistory } from 'react-router-dom'
import {reqlist} from '@/api'
import { forceCheck } from 'react-lazyload'

const Main = (props) => {
    const {maindata}=props
    const {getMainDataDispatch}=props
    const history=useHistory()
    const {classify=[],rotationImg=[],menuBarData={}}=maindata
    const [showPopup,setShowPopup]=useState(false)
    const [display,setDisplay]=useState(false)
    const [menuDisplay,setMenuDisplay]=useState(0)
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)

    console.log(maindata);

    const fetchList=()=>{
        // 不走redux 
        // api ?
        reqlist(page)
            .then(res=>{
                // console.log(res)
                setList([...list,...res.data.data.list])
            })
    }

    useEffect(()=>{
        if(!maindata.length){
            getMainDataDispatch()
        }
    },[])

    useEffect(()=>{
        fetchList()
    },[page])

    const handleOnclick=()=>{
        // popup 组件的显示
        setShowPopup(!showPopup)
    }
    // 上拉加载
    const handlePullUp=()=>{
        console.log('上拉加载')
        setPage(page+1)
    }
    // 下拉刷新
    const handlePullDown=()=>{
        console.log('下拉刷新')
    }


    return (
        <div className='main'>
            <SearchInput 
                handleOnclick={()=>{handleOnclick()}}
                searchBoxHandleOnclick={()=>{history.push('/search')}}
            />
            <Scroll
                direction={"vertical"}
                refresh={false}
                onScroll={
                    (e)=>{
                        // console.log(e.y)
                        if(e.y<-1142){
                            setMenuDisplay(1)
                        }
                        else{
                            setMenuDisplay(0)
                        }
                        forceCheck()
                    }
                }
                pullUp={handlePullUp}
                pullDown={handlePullDown}
            >
                <div className='main-padding'>
                    <Classify classifyData={classify} />
                    <RotationChart rotationImg={rotationImg} />
                    <MenuBar menuBarData={menuBarData} />
                    <ImgList />
                    <HomeService />
                    <FrameLayout />
                    <ListData list={list} />
                </div>
            </Scroll>
            <MainBottomChooseCopy display={menuDisplay}  />
            <MainPopup handleOnclick={handleOnclick} display={showPopup} />
        </div>
    )
}

const mapStateToPorps=(state)=>{
    return {
        maindata:state.main.maindata
    }
}

const mapStateToDispatch=(dispatch)=>{
    return {
        getMainDataDispatch(){
            dispatch(actionTypes.getMainData())
        }
    }
}

export default connect(mapStateToPorps,mapStateToDispatch)(memo(Main))